require('../../../less/views/module/service_form.less');
var React = require('react');
var ListView = require('../../controls/ListView');
var Form = require('../../controls/Form');
var Button = require('../../controls/Button');
var _session = JSON.parse(localStorage.getItem('LOGIN_SESSION'));
module.exports = React.createClass({
	getInitialState: function () {
		return {
			currTabIndex: null,
			tabItems: [
				{ text: 'Build Service' },
				{ text: 'Config & Boot' }
			],
			formItems: [
				{ title: 'Service Name', name:'Name', type:'text' },
				{ title: 'Version', name:'Version', type:'text' },
				{ title: 'Basic Images', name:'Images', type:'select', textKey: 'Name', valueKey: 'Name', data: Store.post('/ddp/micro/v1/basis/list', _session) },
				{ title: 'Fetch Service Package Form', name:'BuildFrom', type:'radio', value: 'local',
					data: [
						{ text: 'Local', value: 'local' },
						{ text: 'DevNet Git Repository', value: 'git' }
					],
					onInputChange: function (name, value){
						var _parent = value.props.parent;
						if(value.value=='local'){
							_parent.next.hidden(false);
							_parent.next.next.hidden(true);
						} else {
							_parent.next.next.hidden(false);
							_parent.next.hidden(true);
						}
					}
				},
				{ title: 'FileLocal', name:'FileLocal', type:'file', hidden: true },
				{ title: 'GitLocal', name:'GitLocal', type:'text', hidden: true },
				{ title: 'Generate Dockerfile From', name:'GenerateFrom', type:'radio', value: 'empty',
					data: [
						{ text: 'Empty Dockerfile', value: 'empty' },
						{ text: 'From My Template', value: 'template' }
					],
					onInputChange: function (name, value){
						var _parent = value.props.parent;
						if(value.value=='template'){
							_parent.next.hidden(false);
						} else {
							_parent.next.hidden(true);
						}
					}
				},
				{ title: 'My Template', name:'MyTemplate', type:'select', hidden: true,
					data: [
						{ text: 'Template1', value: '1' },
						{ text: 'Template2', value: '2' },
						{ text: 'Template3', value: '3' },
						{ text: 'Template4', value: '4' }
					]
				},
				{ title: 'DockerFile', name:'DockerFile', type:'codemirror' },
				{ title: 'Builder Center', name:'Center', type:'radio',
					data: [
						{ text: 'SCJ Site', value: 'scj' },
						{ text: 'ShangHai', value: 'sh' }
					]
				},
				{ title: 'Service Catgory', name:'Catgory', type:'select',
					data: [
						{ text: 'Big Data', value: 'bigdata' },
						{ text: 'IoT', value: 'iot' },
						{ text: 'Common', value: 'common' },
						{ text: 'Other', value: 'other' }
					]
				},
				{ title: 'Service Icon', name:'Icon', type:'select',
					data: [
						{ text: 'Icon1', value: 'icon1' },
						{ text: 'Icon2', value: 'icon2' }
					]
				},
				{ title: 'As My Dockerfile Template', name:'SaveAsTemplate', type:'radio',
					data: [
						{ text: 'Yes', value: 'yes' },
						{ text: 'No', value: 'no' }
					]
				},
				{ title: 'Description', name:'Description', type:'textarea' }
			]
		}
	},
	render: function(){
		return (
			<div className="m-service-form">
				<div className="head">
					<ListView
						skin="tab-1"
						fireIndex={0}
						onClick={(event, data)=>this.setState({ currTabIndex: data.index })}
						itemRender={(item)=>{ return <span>{item.text}</span>;}}
						data={this.state.tabItems} />
				</div>
				<div className="body">
					<div className={this.state.currTabIndex===0?'':'hidden'}>
						<div className="tips">Create Service Tips</div>
						<Form
							method="POST"
							layout="stacked"
							hiddens={this.props.session}
							action="http://10.140.41.108:5000/ddp/ds/v1/create"
							style={{ margin: 25 }}
							syncSubmit={true}
							items={this.state.formItems} >
							<Button float="right" style={{marginTop: 10 }} text="Build & Push" onClick={(props)=>{props.form.submit()}}/>
							<Button float="right" status="danger" style={{margin: 10}} text="Cancle" onClick={()=>Popup.close('dialog')}/>
						</Form>
					</div>
					<div className={this.state.currTabIndex===1?'':'hidden'}>
						<div className="tips">Build Service Tips</div>
						<div>Building Console:</div>
					</div>
				</div>
			</div>
		);
	}
});
